<script lang="ts" setup>
import { ref, watch } from 'vue';
import { getCompanyListApi, putCompanyListApi } from '@/common/apis/attendance';
import type { AttendanceLocation } from '@/common/types/attendance-type'
import { message } from 'ant-design-vue';

// 弹框
const open = ref<boolean>(false);
// 经纬度
const center = ref({ lat: 40.060244, lng: 116.34351300000004 });
// 地图缩放大小
const zoom = ref(15);
// 圆形几何数据 初始半径
const radius = ref(285);
// 标记点数据
const markerGeometries = ref();

// 储存数据
const companyData = ref(); // 存储所有公司的完整数据
const circleRef = ref();
const mapRef = ref();

// 当前选中的公司 ID
const selectedCompanyId = ref();

const geometries = ref([
    {
        styleId: 'circle', // 样式 ID
        radius: radius.value, // 半径
        center: { lat: 40.060244, lng: 116.34351300000004 }, // 初始中心点
    },
]);

// 地图控件配置
const control = {
    scale: {},
    zoom: {
        position: 'topRight',
    },
};

// 圆形样式配置
const styles = {
    circle: {
        color: 'rgba(41,91,255,0.16)', // 填充颜色
        showBorder: true, // 是否显示边框
        borderColor: 'rgba(41,91,255,1)', // 边框颜色
        borderWidth: 2, // 边框宽度
    },
};

// 标记点样式配置
const markerStyles = {
    marker: {
        width: 20, // 图标宽度
        height: 30, // 图标高度
        anchor: { x: 10, y: 30 }, // 图标锚点
    },
};

// 其他选项
const options = {
    zIndex: 1, // 图层层级
};

// 获取公司经纬度坐标
const getCompanyListData = async () => {
    const res = await getCompanyListApi();
    console.log(res, '存储所有公司的完整数据')
    companyData.value = res.data.data; // 存储所有公司的完整数据

    // 动态生成标记点
    markerGeometries.value = companyData.value.map((company: AttendanceLocation) => ({
        styleId: 'marker', // 样式 ID
        position: { lat: company.point[1], lng: company.point[0] }, // 标记点位置
        properties: {
            title: company.name, // 标记点标题
        },
    }));

    // 设置初始半径
    if (companyData.value.length > 0) {
        selectedCompanyId.value = companyData.value[0].id;
        radius.value = companyData.value[0].radius;
    }
};

// 控制弹框隐藏
const showModal = async () => {
    open.value = true;
    // 调用接口
    await getCompanyListData();
};

// 保存修改
const handleOk = async () => {
    open.value = false;

    // 更新所有公司的半径
    const updatedCompanies = companyData.value.map((company: AttendanceLocation) => {
        if (company.id === selectedCompanyId.value) {
            return {
                ...company, // 保留其他字段
                radius: radius.value, // 更新半径
            };
        }
        return company;
    });

    // 调用批量更新接口
    await putCompanyListApi({ list: updatedCompanies })

    message.success('批量更新成功')
};

// 点击获取当前公司id
const clickCompany = (id: number) => {
    const selectedCompany = companyData.value.find((company: AttendanceLocation) => company.id === id);
    if (selectedCompany) {
        // 更新地图中心点
        center.value = { lat: selectedCompany.point[1], lng: selectedCompany.point[0] };

        // 更新圆形区域的中心点
        geometries.value = [
            {
                styleId: 'circle',
                radius: radius.value, // 使用当前的半径
                center: { lat: selectedCompany.point[1], lng: selectedCompany.point[0] },
            },
        ];

        // 更新当前选中的公司 ID
        selectedCompanyId.value = id;

        // 更新 radius
        radius.value = selectedCompany.radius;
    }
};

// 监听半径变化，更新圆形区域和当前选中公司的半径
watch(radius, (newRadius) => {
    if (selectedCompanyId.value !== null) {
        // 更新当前选中公司的半径
        const selectedCompany = companyData.value.find((company) => company.id === selectedCompanyId.value);
        if (selectedCompany) {
            selectedCompany.radius = newRadius;
        }

        // 更新圆形区域
        geometries.value = [
            {
                styleId: 'circle',
                radius: newRadius,
                center: geometries.value[0].center, // 保持中心点不变
            },
        ];
    }
});

defineExpose({
    showModal,
});
</script>

<template>
    <div v-if="open === true">
        <a-modal v-model:open="open" title="打卡范围" width="100%" wrap-class-name="full-modal" @ok="handleOk">
            <div class="map">
                <div class="map-tlbs">
                    <tlbs-map ref="mapRef" api-key="OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77" :center="center" :zoom="zoom"
                        :control="control">
                        <!-- 圆形区域 -->
                        <tlbs-multi-circle ref="circleRef" :geometries="geometries" :styles="styles"
                            :options="options" />
                        <!-- 标记点 -->
                        <tlbs-multi-marker :geometries="markerGeometries" :styles="markerStyles" />
                    </tlbs-map>

                    <div>
                        <a-slider v-model:value="radius" :min="100" :max="1000" />
                    </div>
                </div>

                <div class="map-text">
                    <div v-for="item in companyData" :key="item.id" @click="clickCompany(item.id)">
                        <h5>{{ item.name }}</h5>
                    </div>
                </div>
            </div>
        </a-modal>
    </div>
</template>

<style lang="scss">
.map {
    width: 100%;
    display: flex;

    &-tlbs {
        width: 70%;
    }

    &-text {
        width: 30%;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
}

.full-modal {
    .ant-modal {
        max-width: 100%;
        top: 0;
        padding-bottom: 0;
        margin: 0;
    }

    .ant-modal-content {
        display: flex;
        flex-direction: column;
        height: calc(100vh);
    }

    .ant-modal-body {
        flex: 1;
    }
}
</style>